<template>
  <a-modal
    v-model:visible="visibleModel"
    draggable
    width="780px"
    @before-ok="onSubmit"
    title="编辑科目"
    @cancel="visibleModel = false"
  >
    <a-row>
      <a-col :flex="1">
        <a-form
          :model="formModel"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
          label-align="left"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="keywords" label="关键词">
                <a-input
                  v-model="formModel.keywords"
                  allow-clear
                  placeholder="请输入关键词"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-space :size="18">
                <a-button type="primary" @click="search">
                  <template #icon>
                    <icon-search />
                  </template>
                  {{ $t('searchTable.form.search') }}
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
    </a-row>
    <a-table
      v-model:selectedKeys="selectedKeys"
      row-key="id"
      height="500px"
      :loading="loading"
      :data="renderData"
      :row-selection="rowSelection"
      :bordered="false"
      :pagination="{
        current: pagination.page,
        total: pagination.total,
        pageSize: pagination.rows,
        showTotal: true,
        showPageSize: true,
      }"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @select="selectChange"
    >
      <template #columns>
        <a-table-column title="序号" :width="60">
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column title="科目编码" data-index="code" />
        <a-table-column title="科目名称" data-index="standardText" />
        <a-table-column title="借贷方" data-index="directionName" />
        <a-table-column title="辅助核算项">
          <template #cell="{ record }">
            <a-space v-for="(item,key) in record.assistComputList" :key="key">
            <a-tag>{{ item.bizObjName }}</a-tag>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-modal>
</template>

<script lang="ts" setup>
import { Message, TableRowSelection } from "@arco-design/web-vue";
import useLoading from '@/hooks/loading';
import { ref, reactive, watch } from 'vue';
import { AccountParams, accountSetList, RuleItemVO } from "@/api/invoice";

const generateFormModel = () => {
  return {
    keywords: '',
  };
};
const selectedKeys = ref<string[]>([]);
const pagination = reactive({
  page: 1,
  rows: 5,
  total: 0,
});
const rowSelection = reactive<TableRowSelection>({
  type: 'radio'
});
const { loading, setLoading } = useLoading();
const renderData = ref<any[]>([]);
const formModel = ref(generateFormModel());
const visibleModel = ref(false);
const emit = defineEmits(['select']);
const selectRow = ref<any>();
const rowInfo = ref<RuleItemVO>();
const selectChange =  (rowKeys: any, rowKey: any, record: any) => {
  selectRow.value = record;
};

const fetchData = async (
  params: AccountParams // = { current: 1, pageSize: 20 }
) => {
  setLoading(true);
  try {
    const { data } = await accountSetList(params);
    renderData.value = data.rows;
    pagination.total = data.total;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};
const onPageChange = (current: number) => {
  pagination.page = current;
  fetchData({ ...formModel.value, ...pagination });
};

const onPageSizeChange = (pageSize: number) => {
  pagination.rows = pageSize;
  fetchData({ ...formModel.value, ...pagination });
};
function onSubmit (done: any) {
  console.log(selectRow.value)
  if (!selectRow.value) {
    Message.warning('请选择一行数据');
    done(false);
  }else {
    done();
    emit('select', { selectRow:selectRow.value, row:rowInfo.value });
  }
}
fetchData({ ...formModel.value, ...pagination });
const search = () => {
  pagination.page = 1;
  fetchData({ ...formModel.value, ...pagination });
};
const handleChangeVisible = (row: RuleItemVO) => {
  visibleModel.value = !visibleModel.value;
  if (visibleModel.value) {
    rowInfo.value = row;
    if (row) {
      search();
    }
  }
};
defineExpose({ handleChangeVisible });
</script>

<style scoped>
.ellipsis-text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 这里设置为3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
